<template>
  <div class="storage-level-item">
    <!--   列标题   -->
    <div class="scroll-title">
      <h3>{{ `${props.title} · ${props.list?.length}` }}</h3>
      <PlusCircleTwoTone v-if="editable && !(props.levelType === 3 && props.levelIndex === 1)" @click="addBtnClickFn(props.levelType, props.levelIndex)" />
    </div>

    <!--   滚动容器   -->
    <div v-if="props.list?.length" class="scroll-box">
      <!--    滚动元素    -->
      <div v-for="(item, index) in props.list" :key="index" class="level-box" :class="{ active: index === props.currentIndex }" @click="boxItemClickFn(item, index)">
        <!--   标题   -->
        <Popover>
          <template #content> {{ props.levelType === 2 ? item?.levelName : item?.storageName }}</template>
          <div class="level-box-title">
            {{ props.levelType === 2 ? item?.levelName : item?.storageName }}
          </div>
        </Popover>

        <!--   内容   -->
        <div class="level-box-content">
          <!--    图片    -->
          <img v-if="item.url" :src="item.url" alt="" />
          <img v-else-if="item?.storageName === '中转区'" src="@/assets/images/transit.png" alt="" />
          <img v-else-if="levelType === 3" src="@/assets/images/min-box.png" alt="" />
          <img v-else src="@/assets/images/structure.png" alt="" />

          <!--    内容    -->
          <div class="content-box">
            <!--       中转区显示       -->
            <div v-if="props.levelType === 1 && index === props.list?.length - 1 && item?.storageName === '中转区'">
              <!--        空盒        -->
              <div class="content-box-item">
                <img src="@/assets/images/content-2.png" alt="" />
                {{ item?.boxEmptyCount }}
              </div>
              <!--        可用盒/总盒        -->
              <div class="content-box-item">
                <img src="@/assets/images/content-3.png" alt="" />
                {{ `${item?.boxCount - item?.boxUsedCount}/${item?.boxCount}` }}
              </div>
            </div>

            <!--       盒位显示       -->
            <div v-else-if="props.levelType === 3" style="transform: scale(0.9); transform-origin: 0 20px">
              <div v-if="item?.boxSerial" class="content-box-item">
                冻存盒编号：<Tooltip :title="item?.boxSerial">
                  <span style="width: 90px; overflow: hidden; text-overflow: ellipsis">
                    {{ `${item?.boxSerial}` }}
                  </span>
                </Tooltip>
              </div>
              <div v-if="item?.boxEpc" class="content-box-item">冻存盒类型：{{ boxTypeList?.find((sub) => sub?.value === item.boxType)?.label }}</div>
              <div v-if="item?.boxEpc" class="content-box-item">已存放支数：{{ `${item?.usedCount}` }}</div>
            </div>

            <!--       通用显示       -->
            <template v-else>
              <div>
                <!--         可存放样本支数/样本总支数         -->
                <div class="content-box-item">
                  <img src="@/assets/images/content-1.png" alt="" />
                  {{ `${item?.capacity - item?.usedCount}/${item?.capacity}` }}
                </div>
                <!--         可用冻存盒数量/总冻存盒数         -->
                <div class="content-box-item">
                  <img src="@/assets/images/content-3.png" alt="" />
                  {{ `${item?.boxCount - item?.boxUsedCount}/${item?.boxCount}` }}
                </div>
              </div>
              <div>
                <!--        空盒数量          -->
                <div class="content-box-item" style="min-width: 50px">
                  <img src="@/assets/images/content-2.png" alt="" />
                  {{ item?.boxEmptyCount }}
                </div>
                <!--         可用冻存盒数量         -->
                <div class="content-box-item" style="min-width: 50px">
                  <img src="@/assets/images/content-4.png" alt="" />
                  {{ item?.boxCount - item?.boxUsedCount }}
                </div>
              </div>
            </template>
          </div>
        </div>

        <!--   进度条   -->
        <div v-show="showProportionFn(index)" class="level-box-proportion">
          <div :style="{ width: getProportionWidthFn(item) }" class="proportion-progress">
            <div style="transform: scale(0.8); transform-origin: right top">
              {{ Number(((item?.capacity - item?.usedCount) / item?.capacity) * 100).toFixed(2) + '%' }}
            </div>
          </div>
        </div>

        <!--   弹窗   -->
        <div v-show="((showModalFn(index) && editable) || levelType === 3) && !isTransit" :style="{ backgroundColor: getModalColorFn(item) }" class="btn-modal">
          <slot name="modal" :data="item" :levelIndex="props.levelIndex" :currentIndex="props.currentIndex"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PlusCircleTwoTone } from '@ant-design/icons-vue';
import { Tooltip, Popover } from 'ant-design-vue';
import { computed, inject } from 'vue';

/**
 * const
 */
const props = withDefaults(
  defineProps<{
    levelType?: 1 | 2 | 3;
    list: any[];
    title?: string;
    levelIndex: number;
    currentIndex: number;
    isTransit: boolean;
  }>(),
  {},
);
const emits = defineEmits<{
  (e: 'addBtnClick', levelType: 1 | 2, levelIndex?): void;
  (e: 'boxClick', info: { levelIndex: number; currentIndex: number; data: any }): void;
}>();
const boxTypeList = inject('boxTypeList');

/**
 * 进度条
 */
// 显示进度条
const showProportionFn = (index) => {
  return (props.levelType !== 3 && props.levelType !== 1) || (props.levelType === 1 && index !== props.list?.length - 1);
};
const getProportionWidthFn = (item) => {
  return `${209 * ((item?.capacity - item?.usedCount) / item?.capacity) ?? 0}px`;
};
const addBtnClickFn = (levelType, levelIndex) => {
  emits('addBtnClick', levelType, levelIndex);
};
const editable = computed(() => {
  if (props.levelType && props.levelType !== 3) return true;
  return !props.list.every((item) => item.deviceId > 0);
});

/**
 * 弹窗
 */
const showModalFn = (index) => {
  return !(props.levelType === 1 && index === props.list?.length - 1);
};
const getModalColorFn = (item) => {
  if (props.levelType === 3) {
    if (item?.boxUsedCount === 0) {
      return '#439EFF';
    } else if (item?.usedCount > 0) {
      return '#939393';
    } else if (item?.boxEmptyCount === 1) {
      return '#FF9E9E';
    }
  } else if (!props.levelType && (item?.usedCount > 0 || props.list?.length === 1)) {
    return '#939393';
  } else {
    return '#439EFF';
  }
};

/**
 * 子模块
 */
// 子模块点击
const boxItemClickFn = (item: any, index: number) => {
  emits('boxClick', {
    levelIndex: props.levelIndex,
    currentIndex: index,
    data: item,
  });
};
</script>

<style scoped lang="less">
.scroll-title {
  width: 213px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 3px;
  font-size: 22px;
  h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 29px;
  }
}
.scroll-box {
  height: 450px;
  padding-right: 7px;
  padding-left: 3px;
  overflow-x: hidden;
  overflow-y: auto;
}
.storage-level-item {
  flex-shrink: 0;
  margin-right: 6px;
}
.level-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 209px;
  height: 101px;
  margin-top: 3px;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 5px #838585;
  cursor: pointer;
  &:hover {
    .btn-modal {
      height: 27px;
      opacity: 0.8;
    }
  }
  &.active {
    border: 2px solid #60b1ff;
  }
  &:last-child {
    margin-bottom: 6px;
  }
  .level-box-title {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 28px;
    padding-left: 10px;
    font-size: 18px;
    font-family: 'Microsoft YaHei UI-Light, Microsoft YaHei UI', sans-serif;
    font-weight: 300;
  }
  .level-box-content {
    flex: 1;
    display: flex;
    align-items: center;
    > img {
      width: 42px;
      margin: 0 5px;
      object-fit: contain;
    }
  }
  .level-box-proportion {
    width: 100%;
    height: 10px;
    background-color: #ebeaea;
    .proportion-progress {
      height: 100%;
      padding-right: 5px;
      text-align: right;
      background-color: #1492fe;
      line-height: 10px;
      font-size: 12px;
      color: #fff;
      overflow: hidden;
    }
  }
  .btn-modal {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 0;
    padding: 5px;
    opacity: 0;
    transition: all 200ms linear;
  }
}
.content-box {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  .content-box-item {
    display: flex;
    align-items: center;
    padding-right: 10px;
    font-size: 12px;
    transform: scale(0.9);
    transform-origin: 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    > img {
      object-fit: contain;
      width: 12px;
      margin-right: 3px;
    }
  }
}
</style>
